<template>
  <div class="leftnav">
    <div class="top-bar"></div>
    <el-menu
      :default-active="getCurrentIndex"
      class="menu"
      :collapse="isCollapse"
      background-color="#001529"
      unique-opened
      :collapse-transition="flag"
      router
      @select="selectPath"
    >
      <el-submenu
        v-for="item in list"
        :key="item.index"
        :index="`${item.index}`"
      >
        <template slot="title">
          <!-- el-icon-user-solid -->
          <!-- el-icon-location -->
          <!-- el-icon-s-goods -->
          <!-- el-icon-s-order -->
          <!-- el-icon-s-marketing -->
          <i :class="item.class"></i>
          <!-- <i class="el-icon-location" v-if="index == 1"></i>
          <i class="el-icon-s-goods" v-if="index == 2"></i>
          <i class="el-icon-s-order" v-if="index == 3"></i>
          <i class="el-icon-s-marketing" v-if="index == 4"></i> -->
          <span slot="title">{{ item.label }}</span>
        </template>
        <el-menu-item
          v-for="item2 in item.children"
          :key="item2.index"
          :index="`${item2.index}`"
          :route="`${item2.route}`"
        >
          <span
            :style="
              isCollapse && getCurrentIndex != item2.index ? 'color: #fff' : ''
            "
            >{{ item2.label }}</span
          >
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  data () {
    return {
      flag: false,
      list: [
        {
          index: '1',
          label: '网站管理',
          class: 'el-icon-s-check',
          children: [
            {
              index: '1-1',
              label: '基本参数',
              route: '/basic',
            },
            {
              index: '1-2',
              label: '栏目管理',
              route: '/column',
            },
            {
              index: '1-3',
              label: '业务领域',
              route: '/businessArea',
            },
          ],
        },
        {
          index: '2',
          label: '内容管理',
          class: 'el-icon-office-building',
          children: [
            {
              index: '2-1',
              label: '分公司管理',
              route: '/branchManage',
            },
            {
              index: '2-2',
              label: '行业管理',
              route: '/industryManagement',
            },
            {
              index: '2-3',
              label: 'banner管理',
              route: '/bannerManage',
            },
            {
              index: '2-4',
              label: '集团新闻',
              route: '/groupNews',
            },
            {
              index: '2-5',
              label: '分支企业动态',
              route: '/branchDynamics',
            },
            {
              index: '2-6',
              label: '媒体报道',
              route: '/reportMediaManages',
            },
            {
              index: '2-7',
              label: '合作伙伴',
              route: '/cooperativePartner',
            },
          ],
        },
        {
          index: '3',
          label: '后台用户管理',
          class: 'el-icon-user-solid',
          children: [
            {
              index: '3-1',
              label: '用户管理',
              route: '/backgroundUser',
            }
          ],
        },
      ]
    }
  },
  methods: {
    ...mapMutations(['setCurrentIndex']),
    selectPath (index, indexPath) {
      this.setCurrentIndex(index)
    },
  },
  computed: {
    ...mapGetters(['getCurrentIndex'])
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="less">
.top-bar {
  height: 65px;
  color: white;
  text-align: center;
  background: rgba(0, 40, 77, 1);
  cursor: pointer;
}
.menu:not(.el-menu--collapse) {
  width: 100%;
  border: none;
}
.el-submenu__title {
  span {
    color: rgba(255, 255, 255, 0.647058823529412);
  }
}
.menu {
  border: none;
  background: rgba(0, 21, 41, 1);
  /deep/.el-menu-item:not(.is-active) {
    span {
      color: rgba(255, 255, 255, 0.647058823529412);
    }
  }
}
</style>